<template>
  <div style="height:100%;">
    <div v-transfer-dom>
      <loading v-model="isLoading"></loading>
    </div>
    <!-- 主菜单选项 -->
    <div v-transfer-dom>
      <actionsheet :menus="menus" v-model="showMenu" @on-click-menu="changeLocale"></actionsheet>
    </div>
    <!-- 模板菜单编辑选项 -->
    <div v-transfer-dom>
      <actionsheet :menus="eidtor" v-model="showEdit" @on-click-menu="changeLocale"></actionsheet>
    </div>
    <drawer
    width="200px;"
    :show.sync="drawerVisibility"
    :show-mode="showModeValue"
    :placement="showPlacementValue"
    :drawer-style="{'background-color':'#35495e', 'width': '200px',}">
       <div slot="drawer">
         <group title="功能菜单" style="line-height:1.95em;">
           <cell title="登录" link="/login"  @click.native="drawerVisibility = false">
           </cell>
           <cell title="猫嗅采集" link="project/donate" @click.native="drawerVisibility = false">
           </cell>
           <cell title="精品欣赏" link="http://github.com/airyland/vux"  @click.native="drawerVisibility = false">
           </cell>
         </group>
         <group title="滑动方式">
           <radio v-model="showMode" :options="['侧滑','覆盖']" @on-change="onShowModeChange"></radio>
         </group>
         <group title="展示方向">
           <radio v-model="showPlacement" :options="['左→右', '右←左']" @on-change="onPlacementChange"></radio>
         </group>
       </div>
       <!-- main content -->
       <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="55px">
        <!-- 顶部导航 -->
         <x-header slot="header"
         style="width:100%;position:absolute;left:0;top:0;z-index:100;"
         :left-options="leftOptions"
         :right-options="rightOptions"
         :title="title"
         :transition="headerTransition"
         @on-click-more="onClickMore">
          <span v-if="route.path === '/' || route.path === '/component/drawer'" slot="overwrite-left" @click="drawerVisibility = !drawerVisibility">
             <x-icon type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
          </span>
          <a slot="right" @click="addItem" v-if="!rightOptions.showMore&&addStatus">
           
            <x-icon type="ios-plus"  size="35" style="fill:#48AD3D;position:relative;top:-8px;right:-3px;"></x-icon>
          </a>
          <a slot="right" @click="switchBtton" v-if="routeState=='editModules'">
            <x-icon type="ios-more"  size="35" style="fill:#fff;position:relative;top:-8px;right:-3px;"></x-icon>
          </a>
         </x-header>
         <!-- remember to import BusPlugin in main.js if you use components: x-img and sticky -->
         <transition
         @after-enter="$vux.bus && $vux.bus.$emit('vux:after-view-enter')"
         :name="viewTransition" :css="!!direction">
           <router-view class="router-view"></router-view>
         </transition>
       </view-box>
    </drawer>
    <upload-image @delImage="cannelImage" :showUploadImage.sync="changeImg" :images="data.baseLists.bgImg" :indexImage="-1" :mark="'baseLists.bgImg'"></upload-image>
  </div>
</template>
<script type="application/ecmascript">
  import * as types from '@/vuex/types'
  import routers from '@/router'
  import UploadImage from '@/public/UploadImage'
  import { mapState, mapActions } from 'vuex'
  import {  Radio,Search,Drawer, Group, Cell,Loading,TransferDom,Actionsheet,ViewBox,XHeader,XSwitch} from 'vux'
  export default {
    directives:{
      TransferDom
    },
    components: {
      Radio,
      Search,
      Group,
      Cell,
      Loading,
      Actionsheet,
      Drawer,
      ViewBox,
      XHeader,
      XSwitch,
      UploadImage
    },
    name: 'listView',
    data () {
      return {
        changeImg:false,
        showMenu: false,
        results: [],
        showEdit:false,
        value: 'test',
        //右边菜单栏
        menus: {
          'edit.noop': '<span class="menu-title">Language</span>',
          'zh-CN': '预留备用',
          'en': '预留备用',
        },
        eidtor:{
          'title.noop': '<span class="menu-title">功能菜单</span>',
          'changeMusic':'更换背景音乐',
          'changeBackground':'更换背景图片',
          'isEdit':'进入编辑状态',
          'noEdit':'取消编辑状态',
          'saveAll':'保存当前状态'
        },
        //是否可以开启抽屉模式
        drawerVisibility: false,
        showMode: 'push',
        showModeValue: 'push',
        showPlacement: 'left',
        showPlacementValue: 'left'
      }
    },
    mounted(){
      this.$store.commit(types.ROUTESTATES, 'home');
    },
    computed:{
      ...mapState({
        route: state => state.route,
        path: state => state.route.path,
        isLoading: state => state.loading.isLoading,
        direction: state => state.loading.direction,
        showMore: state  => state.loading.showMore,
        showMore: state  => state.loading.showMore,
        routeState:state => state.loading.routeState,
        addmore: state   => state.listView.addMore,
        validaty: state  => state.listView.validaty,
        personData:state => state.listView.personData,//人标签数据
        goodsData:state => state.listView.goodsData,//物标签数据
        data:state => state.moduleEdit.data,
        alerdySave:state => state.moduleEdit.alerdySave,
      }),

      leftOptions () {
        return {
          showBack: this.route.path !== '/'
        }
      },
      rightOptions () {
        return {
          showMore: this.showMore
        }
      },
      addStatus(){
        return this.addmore
      },
      headerTransition () {
        if (!this.direction) return ''
        return this.direction === 'forward' ? 'vux-header-fade-in-right' : 'vux-header-fade-in-left'
      },

      title () {
        //console.log(this.route)
        if (this.route.path === '/') return '首页'
        if (this.route.path === '/project/donate') return 'Donate'
        if (this.route.path === '/demo') return 'Demo list'
        if(this.route.params) return this.route.params.status
        return this.route.name ? `${this.route.name}` : '未知页面'
      },
      viewTransition () {
        if (!this.direction) return ''
        return 'vux-pop-' + (this.direction === 'forward' ? 'in' : 'out')
      }
    },
    methods: {
      cannelImage(){
        this.changeImg = false
      },
      switchBtton(){
        this.showEdit = true
      },
      addItem(){
        //console.log(this.validaty)
        if(this.validaty==0){
          routers.push('/chooseModel/人の模板选择')
        }else{
          routers.push('/chooseModel/物の模板选择')
        }
        //console.log(this.validaty)
      },
      onShowModeChange (val) {
        if(val=='侧滑'){
          val = 'push'
        }else{
          val = 'overlay'
        }
        /** hide drawer before changing showMode **/
        this.drawerVisibility = false
        setTimeout(one => {
          this.showModeValue = val
        }, 400)
      },
      onPlacementChange (val) {
        if(val=='左→右'){
          val = 'left'
        }else{
          val = 'right'
        }
        /** hide drawer before changing position **/
        this.drawerVisibility = false
        setTimeout(one => {
          this.showPlacementValue = val
        }, 400)
      },
      onClickMore () {
        this.showMenu = true
      },
      changeLocale (locale) {
        if(locale=='noEdit'){
          this.$store.commit(types.CHANGEEDITOR, false);
        }else if(locale=='isEdit'){
          this.$store.commit(types.CHANGEEDITOR, true);
        }else if(locale=='changeMusic'){
          const _this = this
           this.$vux.confirm.prompt('请填写mp3地址', {
             title: '例如：http://xxx.com/maoxiu.mp3',
             onConfirm (msg) {
              _this.$store.commit(types.CHANGEMUSIC,msg)
             }
           })
        }else if(locale=='changeBackground'){
          this.changeImg = true
        }else if(locale=='saveAll'){
          let id = this.$route.params.id
          let uid = this.$route.params.uid
          let name = this.$route.name
          
            if(this.alerdySave==true){
                alert('已经保存过了，请勿重新保存')
                return
            }else{
              let person = this.personData.children
              let goods  = this.goodsData.children
              let validaty = this.validaty //判断保存是否是人还是物
              this.$store.commit(types.ALERDYSAVE,true)
              this.$store.dispatch(types.SAVEALLINFO,{person,goods,id,name,uid,validaty})
            }
          
        }
      },
      setFocus () {
         this.$refs.search.setFocus()
       },
       resultClick (item) {
         window.alert('you click the result item: ' + JSON.stringify(item))
       },
       getResult (val) {
         console.log('on-change', val)
         this.results = val ? getResult(this.value) : []
       },
       onSubmit () {
         this.$refs.search.setBlur()
         this.$vux.toast.show({
           type: 'text',
           position: 'top',
           text: 'on submit'
         })
       },
       onFocus () {
         console.log('on focus')
       },
       onCancel () {
         console.log('on cancel')
       }
    }
  }
  function getResult (val) {
    let rs = []
    for (let i = 0; i < 20; i++) {
      rs.push({
        title: `${val} result: ${i + 1} `,
        other: i
      })
    }
    return rs
  }
</script>
<style lang="less">
@import '~vux/src/styles/reset.less';
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/tap.less';

body {
  background-color: #fbf9fe;
}
html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.demo-icon-22 {
  font-family: 'vux-demo';
  font-size: 22px;
  color: #888;
}
.vux-demo-header-box {
  z-index: 100;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

@font-face {
  font-family: 'vux-demo';  /* project id 70323 */
  src: url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.eot');
  src: url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.eot?#iefix') format('embedded-opentype'),
  url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.woff') format('woff'),
  url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.ttf') format('truetype'),
  url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.svg#iconfont') format('svg');
}
.demo-icon {
  font-family: 'vux-demo';
  font-size: 20px;
  color: #04BE02;
}

.demo-icon-big {
  font-size: 28px;
}

.demo-icon:before {
  content: attr(icon);
}

.router-view {
  width: 100%;
  top: 46px;
}
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 500ms;
  height: 100%;
  top: 46px;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.menu-title {
  color: #888;
}
</style>